<template>
  <div class="category">
    <ul class="navigation">
      <li class="center navBar">京东超市</li>
      <li class="center navBar">国际品牌</li>
      <li class="center navBar">奢侈品</li>
      <li class="center navBar">唯品会</li>
      <li class="center navBar">男装</li>
      <li class="center navBar">女装</li>
      <li class="center navBar">男鞋</li>
      <li class="center navBar">女鞋</li>
      <li class="center navBar">内衣配饰</li>
      <li class="center navBar">珠宝</li>
      <li class="center navBar">电脑办公</li>
      <li class="center navBar">户外运动</li>
      <li class="center navBar">汽车用品</li>
      <li class="center navBar">鲜花礼品</li>
      <li class="center navBar">宠物超市</li>
    </ul>
    <div class="content">
      <h4 class="leftBottom content_title">热门列表</h4>
      <ul class="content_wrapper">
        <li class="list">
          <div class="list_img">
            <img src="../../../static/images/index/oil.jpg" alt="">
          </div>
          <div class="title center">橄榄油</div>
        </li>
        <li class="list">
          <div class="list_img">
            <img src="../../../static/images/index/oil.jpg" alt="">
          </div>
          <div class="title center">橄榄油</div>
        </li>
        <li class="list">
          <div class="list_img">
            <img src="../../../static/images/index/oil.jpg" alt="">
          </div>
          <div class="title center">橄榄油</div>
        </li>
        <li class="list">
          <div class="list_img">
            <img src="../../../static/images/index/oil.jpg" alt="">
          </div>
          <div class="title center">橄榄油</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},

    data () {
      return {
        logs: '6666'
      }
    },

    created () {
    }
  }
</script>

<style scoped lang="less">
  .category{
    width: 100%;
    height: 100%;
    .navigation{
      width: 170rpx;
      height: 1150rpx;
      float: left;
      background: #a8a8a8;
      font-size: 28rpx;
      overflow-y: auto;
      .navBar{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        border-bottom: 1px solid #e3e3e3;
      }
    }
    .content{
      height: 1150rpx;
      margin-left: 200rpx;
      overflow: auto;
      .content_title{
        width: 100%;
        height: 50rpx;
        font-size: 25rpx;
        padding-left: 15rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      .content_wrapper{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .list{
          width: 26%;
          height: 200rpx;
          margin: 1% 2% 1% 2%;
          .list_img{
            width: 100%;
            height: 80%;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .title{
            width: 100%;
            height: 20%;
            text-align: center;
            font-size: 25rpx;
          }
        }
      }
    }
  }

</style>
